<template>
  <div class="extend-panel-modal">
    <je-modal
      v-model:visible="isShow"
      title="扩展面板"
      :centered="true"
      ok-text="确认"
      width="1200px"
      keep-source
      :resize="false"
      cancel-text="取消"
      cancel-button
      :ok-button="okButton"
      @close="onButton"
    >
      <je-tabs
        v-model:activeKey="activeKey"
        class="tab-color"
        style="height: 100%"
        @change="changeTabs"
      >
        <je-tab-pane v-for="tab in tabData" :key="tab.code">
          <template #tab>
            <i :class="tab.icon"></i>
            {{ tab.text }}
          </template>
          <extend-table
            :extent-type="activeKey"
            :extend-table-data="tableData"
            @changeData="changeData"
            @checkTableResult="checkTableResult"
            @changeActiveStatu="changeActiveStatu"
          ></extend-table>
        </je-tab-pane>
      </je-tabs>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, defineAsyncComponent, watch } from 'vue';
  import { Modal, Tabs } from '@jecloud/ui';
  import VueEvent from '@/helper/event';

  export default defineComponent({
    name: 'ExtendPanel',
    components: {
      JeTabs: Tabs,
      JeTabPane: Tabs.pane,
      JeModal: Modal,
      ExtendTable: defineAsyncComponent(() => import('./extend-table.vue')),
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      extendData: {
        type: String,
        required: true,
      },
    },
    emits: ['changeModal', 'refreshChildData', 'changeExtend'],
    setup(props, { emit }) {
      const isShow = ref(props.visble);
      const activeKey = ref('single');
      const data = props.extendData ? JSON.parse(props.extendData) : [];
      const tableData = ref(data);
      const tabData = ref([
        {
          code: 'single',
          text: '单视图',
          icon: 'fal fa-cube',
        },
        {
          code: 'double',
          text: '多视图',
          icon: 'fal fa-layer-group',
        },
      ]);
      const isChange = ref(false);
      VueEvent.off('checkedMenu');

      const methods = {
        changeActiveStatu({ flag, type }) {
          if (type != activeKey.value) {
            return false;
          }
          isChange.value = flag;
        },
        checkTableResult(result) {
          if (result) {
            // 这边是要保存的数据
            emit('changeModal', isShow.value);
            emit('changeExtend', tableData.value, 'FUNCINFO_EXPANDPANELS');
          }
        },
        okButton() {
          VueEvent.emit('checkedMenu', true);
          return false;
        },
        changeData(data) {
          const type = activeKey.value == 'single' ? 'double' : 'single';
          const typeData = tableData.value.filter((item) => item.extentType == type);
          tableData.value = typeData.concat(data);
        },
        onButton() {
          emit('changeModal', isShow.value);
        },
        changeTabs(value) {
          if (isChange.value) {
            activeKey.value = value == 'single' ? 'double' : 'single';
            Modal.alert('当前存在必填项为空的数据，请填写后再进行切换操作！', 'info');
          }
        },
      };
      return {
        ...methods,
        isShow,
        tableData,
        activeKey,
        tabData,
        isChange,
      };
    },
  });
</script>
<style lang="less">
  .extend-panel-modal {
    > .je-modal--body {
      padding: 0px 20px !important;
    }
    .tab-color {
      .ant-tabs-tab {
        background: none;
        border: 0;
        transition: none;
        &.ant-tabs-tab-active {
          background-color: @white !important;
          .ant-tabs-tab-btn {
            color: @primary-color !important;
            // transition: none;
          }
        }
      }
    }
  }
</style>
